<%@ page import="com.nebula.common.Const" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="../header.jsp"/>
    <title><%=Const.SYSTEM_NAME%>-用户管理</title>
    <style>
        .center {
            width: 80%;
            height: 80%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="container-fluid p-20">
    <div class="row">
        <div class="col-xs-8">
            <table id="user-dg"></table>
        </div>
    </div>
</div>
<div id="add" style="overflow: hidden;position: relative;display: none">
    <div class="center">
        <form action="" class="form-horizontal mt-10">
            <div class="form-group">
                <label for="userName" class="col-sm-3 control-label">用户名</label>
                <div class="col-sm-9">
                    <input type="text" min="0" step="10" class="form-control" id="userName" placeholder="用户名"
                           autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label for="realName" class="col-sm-3 control-label">姓名</label>
                <div class="col-sm-9">
                    <input type="text" min="0" step="10" class="form-control" id="realName" placeholder="姓名"
                           autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label for="gender" class="col-sm-3 control-label">性别</label>
                <div class="col-sm-9">
                    <select class="select form-control" name="gender" id="gender">
                        <option value="male">男</option>
                        <option value="female">女</option>
                        <option value="secret">保密</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="role" class="col-sm-3 control-label">用户权限</label>
                <div class="col-sm-9" id="role-div">
                    <select class="select form-control" id="role" name="role">

                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-primary" id="btAdd"><i class="fa fa-plus"></i>&nbsp;
                        新增
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="edit" style="overflow: hidden;position: relative;display: none">
    <div class="center">
        <form action="" class="form-horizontal mt-10">
            <div class="form-group">
                <label for="userName" class="col-sm-3 control-label">用户名</label>
                <div class="col-sm-9">
                    <input type="text" min="0" step="10" class="form-control" id="userNameEdit" placeholder="用户名"
                           autocomplete="off" readonly>
                </div>
            </div>
            <div class="form-group">
                <label for="realName" class="col-sm-3 control-label">姓名</label>
                <div class="col-sm-9">
                    <input type="text" min="0" step="10" class="form-control" id="realNameEdit" placeholder="姓名"
                           autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label for="gender" class="col-sm-3 control-label">性别</label>
                <div class="col-sm-9">
                    <select class="select form-control" name="gender" id="genderEdit">
                        <option value="male">男</option>
                        <option value="female">女</option>
                        <option value="secret">保密</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="role" class="col-sm-3 control-label">用户权限</label>
                <div class="col-sm-9" id="role-div-edit">
                    <select class="select form-control" id="roleEdit" name="role">

                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-primary" id="btEdit"><i class="fa fa-plus"></i>&nbsp;
                        修改
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<jsp:include page="../footer.jsp"/>
<script src="${pageContext.request.contextPath}/js/custom/user-control.js?v=1.0"></script>
<script>
    $(function () {
        $.ajax({
            type: "post",
            url: "${pageContext.request.contextPath}/manage/role?method=findAll",
            dataType: "json",
            success: function (data) {
                let roles = data.data;
                let html = '';
                $.each(roles, function () {
                    if (this.id === 1003) {
                        html += '<option value="' + this.id + '" selected>';
                    } else {
                        html += '<option value="' + this.id + '">';
                    }
                    html += this.role;
                    html += '</option>';
                });
                $("#role,#roleEdit").append(html);
            }
        });
    });
</script>
</body>
</html>
